@import "lib/styles/variable.scss";

.yui-radio-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  // 圆圈
  .yui-radio {
    position: relative;
    padding: 10px;

    &-inner {
      position: relative;
      display: block;
      width: $radio-size;
      height: $radio-size;
      border: 1px solid $radio-borderColor;
      border-radius: 100%;
      background: #fff;

      &:hover {
        border: 1px solid $main-color;
      }

      &.yui-radio-checked {
        background: $main-color;
        border: none;

        // 里面的小空白
        &::after {
          content: "";
          position: absolute;
          top: 5px;
          left: 5px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #fff;
        }
      }
    }

    // 默认 radio 消失
    &-input {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      outline: none;
      opacity: 0;
    }
  }

  .yui-radio-label {
    font-size: $font-size-default;
    color: $font-color-default;
  }

  &.yui-radio-disabled {
    cursor: not-allowed;
    .yui-radio-inner {
      background: $B100;

      &.yui-radio-checked {
        background: $H100;
      }
    }
    .yui-radio-label {
      color: $B400;
    }
  }
}

.yui-radio-group {
}
